<template>
    <form id="modifyPwd-form" class="modifyPwd-form">
        <group label-width="4em" label-align="left">
            <x-input title="旧密码" type="text" 
            @on-blur="handleBlur" 
            @on-focus="handleFocus" 
            v-model="old_password.val" 
            novalidate 
            :icon-type="old_password.iconType" 
            ref="old_password" 
            name="old_password" 
            placeholder="请输入当前密码" 
            :is-type="old_password.validPwd" required ></x-input>
        </group>
        <group label-width="4em" label-align="left">
            <x-input title="新密码" type="text" 
            @on-blur="handleBlur" 
            @on-focus="handleFocus" 
            v-model="new_password.val" 
            novalidate 
            :icon-type="new_password.iconType" 
            ref="new_password" 
            name="new_password" 
            placeholder="请输入新密码" 
            :is-type="new_password.validPwd" required ></x-input>
        </group>

        <div style="margin-top: 1.5em;">
            <x-button action-type="button" type="primary" :show-loading="isLoading" @click.native="submitData">更改密码</x-button>
        </div>
    </form>
</template>

<script>
import { Group, XInput, XButton, Toast } from 'vux'
export default {
    name: 'ForgetPwd',
    components: {
        Group,
        XInput,
        XButton,
        Toast
    },
  data () {
    return {
      isLoading: false,
      old_password: {
        val: '',
        validPwd: function (value) {
          return {
            valid: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(value),
            msg: '密码格式错误，必须为6-16个字符(包含字母+数字)!'
          }
        },
        iconType: ''
      },
      new_password: {
        val: '',
        validPwd: function (value) {
          return {
            valid: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(value),
            msg: '密码格式错误，必须为6-16个字符(包含字母+数字)!'
          }
        },
        iconType: ''
      }
    }
  },
  created() {
    //   this.type = this.$route.query.type
  },
  methods: {
      handleBlur: function(value, $event){
        const target = $event.target.name
        if (target === 'old_password') {
            const validResult = this.$refs.old_password.valid
            if (!validResult) {
            this.$vux.toast.text(this.$refs.old_password.errors.format || '请输入您的旧密码')
            this.old_password.iconType = 'error'
            } else {
            this.old_password.iconType = 'success'
            }
        } else if (target === 'new_password') {
            const validResult = this.$refs.new_password.valid
            if (!validResult) {
            this.$vux.toast.text(this.$refs.new_password.errors.format || '请输入您的新密码')
            this.new_password.iconType = 'error'
            } else {
            this.new_password.iconType = 'success'
            }
        }
      },
      handleFocus: function(value, $event){
        const target = $event.target.name
        if (target === 'old_password') {
            this.old_password.iconType = ''
        } else if (target === 'new_password') {
            this.new_password.iconType = ''
        } 
      },
      submitData: function(){
        debugger
        if(!this.$refs.old_password.valid) {
            this.$vux.toast.text(this.$refs.old_password.errors.format || '请输入您的旧密码')
            return false;
        }
        if(!this.$refs.new_password.valid) {
            this.$vux.toast.text(this.$refs.new_password.errors.format || '请输入您的新密码')
            return false;
        }
        this.isLoading = true
        this.$store.dispatch('modifyPassword', { old_password: this.old_password.val, new_password: this.new_password.val})
        .then((res) => {
            this.isLoading = false
            let _this = this
            this.$vux.toast.show({
                text: '更改密码成功',
                type: 'success',
                onHide () {
                    _this.$router.push({path: '/learnLogin'})
                }
            })
        }).catch(err => {
            this.isLoading = false
            console.log(err)
        })
    }
    }
}
</script>

<style scoped lang='less'>
.modifyPwd-form {
    width: 85%;
    margin: 0 auto;
    margin-top: 5em;

    /deep/ .weui-cells {
        border-radius: 10px;
        border: 1px solid #ccc;
        outline:none;
    }
}
</style>
